<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    <link rel="shortcut icon" href="favicon.ico">
    <title>登录</title>
    <style>
        body {
            background-color: #f5f5f5;
            display: flex;
            flex-direction: column;
            margin: 0;
            align-items: center;
        }

        .header {
            width: 100%;
            color: #000;
            font-size: 0.4rem;
            height: 1.5rem;
            display: flex;
            justify-content: center;
            font-weight: bold;
            align-items:flex-end;
        }

        form {
            font-size: 0.3rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: .5rem;
            width: 100%;
        }

        form input {
            letter-spacing: .01rem;
            color: #1c1c1c;
            border: none;
            font-size: .3rem;
            padding-left: .2rem;
        }

        form button {
            letter-spacing: .01rem;
            background-color: rgb(0, 0, 0);
            color: rgb(255, 255, 255);
            border-style: none;
            font-size: .2rem;
        }

        form>input {
            height: 1rem;
            width: 7.3rem;
            border-bottom: 1px #ccc solid;
        }

        form>div {
            width: 7.5rem;
            height: 1rem;
            display: flex;
            flex-direction: row;
            border-bottom: 1px #ccc solid;
        }

        form>div>input {
            width: 4.5rem;
        }

        form>div>button {
            padding:0 .2rem;
            width: 3rem;
            background-color: #fff;
            text-align: right;
            color: #666;
        }

        form>button {
            letter-spacing: .1rem;
            margin-top: .5rem;
            height: 1rem;
            width: 7.5rem;
            font-size: .4rem;
        }

        .alert{
            display: none;
            position: fixed;
            top: 2.5rem;
            margin: 0 auto;
            width: 70%;
            background-color: #fff;
            border-radius: .3rem;
            border:solid 1px #ccc;
            line-height: .3rem;
            font-size: .3rem;
        }
        .alert>.alert-msg{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: .3rem;
        }
        .alert>.alert-btn{
            padding: .3rem;
            width: 100%;
            color: #015BF1;
            background-color: #fff;
            border-radius: 0 0 .3rem .3rem;
        }
    </style>
</head>

<body>
    <header class="header">
        登录filorga
    </header>
    <form action="/filorga-wechat/login/loginUser" method="POST">
        <input id="phone" name="phone" placeholder="请输入电话号码">
        <div>
            <input id="code" name="code" placeholder="请输入验证码">
            <button type="button" id="sendCodeBtn">点击发送验证码</button>
        </div>
        <input name="type" type="hidden" value="1">
        <input name="openid" type="hidden" value="${openid}">
        <button type="button" onclick="sub()">登录</button>
    </form>
    <div class="alert">
        <div class="alert-msg"></div>
        <button class="alert-btn">知道了</button>
    </div>
    <script>
        var downCount = 0;
        var inter = null;
        var tmpPhone = null;
        ! function (window) {
            var docWidth = 750;
            var doc = window.document,
                docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
            var recalc = (function refreshRem() {
                var clientWidth = docEl.getBoundingClientRect().width;
                docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px';
                return refreshRem;
            })();
            docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);
            if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
                doc.documentElement.classList.add('ios');
                if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)
                    doc.documentElement.classList.add('hairline');
            }
            if (!doc.addEventListener) return;
            window.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        }(window);
        function alert(msg){
            $('.alert-msg').text(msg)
            $('.alert').show()
        }
        $(function () {
            $('#sendCodeBtn').click(function () {
                if(downCount>0) return;
                tmpPhone = $('#phone').val();
                $.post('/filorga-wechat/login/sendCode', {
                    phone: tmpPhone,
                    type: 1
                },function(resp){
                    if(resp.result){
                        downCount = 60;
                        $('#sendCodeBtn').text(downCount+'秒后重新发送')
                        inter = setInterval(function(){
                            downCount -= 1;
                            $('#sendCodeBtn').text(downCount+'秒后重新发送')
                            if(downCount <=0){
                                downCount = 0;
                                clearInterval(inter);
                                $('#sendCodeBtn').text('点击发送验证码')
                            }
                        },1000);
                    }else{
                        alert(resp.message)
                    }
                },'json')
            });
            $('.alert-btn').click(function(){
                $('.alert').hide()
            })
        })
        function sub(){
            var valueArray = $('form').serializeArray()
            if(_.some(valueArray, function(obj){
                if(obj.value.length==0){
                    switch(obj.name){
                        case 'phone':
                            alert('电话号码不能为空');
                            return true;
                            case 'code':
                            alert('验证码不能为空');
                            return true;
                    }
                }
                if(obj.name == 'phone' && obj.value != tmpPhone){
                    alert('请勿在发送验证码后修改手机号');
                    return true;
                }
                return false;
            })){
                return;
            }else{
                $('form').submit()
            }

        }
        <% if (null != request.getAttribute("message") && "" != request.getAttribute("message")) out.write("alert('" + request.getAttribute("message") + "');"); %>
    </script>
</body>

</html>